const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')

module.exports = {
	entry : ['babel-polyfill', './src/main.js'],
	// 这样的话就会在打包的结果中提供一个垫脚片用以兼容低版本浏览器中的不支持的API
	output : {
		path : path.join(__dirname, 'dist'),
		filename : 'bundle.js'
	},
	plugins : [
		new HtmlWebpackPlugin({
			template : './index.html'
		}),
		new webpack.NamedModulesPlugin(),
	    new webpack.HotModuleReplacementPlugin()
	],
	devServer : {
		// 配置 webpack-dev-server 的 www 目录
		// 浏览器真正运行查看的是打包之后的结果
		contentBase : './',
		hot : true
	},
	externals: {
		// key 就是包名
		// value 是全局的 jQuery 导出的接口
  		vue: 'Vue',
  		'vue-router': 'VueRouter',
  		axios : 'axios'
	},
	module : {
		rules : [
			{
				test : /\.css$/,
				use : [
					'style-loader', 'css-loader'
				]
			},
			{
				test : /\.(png|jpg|gif|svg)$/,
				use : [
					'file-loader'
				]
			},
			{
				test : /\.less$/,
				use : [
					'style-loader', 'css-loader', 'less-loader'
				]
			},
			{
				test : /\.js$/,
				// 不转换 node_modules 中的文件模块
				exclude: /(node_modules|bower_components)/,
				use: {
		        	loader: 'babel-loader',
		        	options: {
		        		// 加入缓存节省编译时间
		        		// babel 编译是非常耗时的，我们可以通过开启对编译结果的缓存来提高打包速度
		        		// 默认吧打包的结果缓存到 node_modules/.cache 目录中
		        		cacheDirectory : true,
		          		presets: ['env'],
		          		// 解决代码重复的问题
		          		plugins : ['transform-runtime']
		        	}
		      	}
			},
			{
				test : /\.vue$/,
				// 现在的vue-loader的版本是14.0.3,vue-template-compiler的版本是2.5.5
				use : [
					'vue-loader'
				]
			}
		]
	}
}